<template>
    <el-dialog
        title="摄像头连接指南"
        :visible.sync="visible"
        width="65%"
        center
        :append-to-body="true"
        :before-close="modalClose"
        :close-on-click-modal="true"
        :close-on-press-escape="false"
    >
        <div class="guidance-content">
            <!-- 1 -->
            <el-row>
                <el-col :span="1"><p>一、</p></el-col>
                <el-col :span="22"><p>到Android应用商店搜索“<span class="red">IP摄像头</span>”下载安装手机APP。</p></el-col>
            </el-row>
            <el-row>
                <el-col :span="24"><img :src="require('@/assets/img-connection-guidance/1.jpg')" class="connection-guidance-img"/></el-col>
            </el-row>
            <el-divider></el-divider>
            <!-- 2 -->
            <el-row>
                <el-col :span="1"><p>二、</p></el-col>
                <el-col :span="22"><p>打开“<span class="bold">IP摄像头</span>”APP，
                点击APP首页<span class="bold">右上角齿轮图标设置按钮</span>，
                找到“<span class="red">RTMP推流地址</span>”选项，
                点击并输入：<span class="red">{{RTMPPushUrl}}</span>，
                点击“<span class="bold">确定</span>”按钮。</p></el-col>
            </el-row>
            <el-row>
                <el-col :span="7"><img :src="require('@/assets/img-connection-guidance/2.jpg')" class="connection-guidance-img"/></el-col>
                <el-col :span="1">&nbsp;</el-col>
                <el-col :span="7"><img :src="require('@/assets/img-connection-guidance/3.jpg')" class="connection-guidance-img"/></el-col>
                <el-col :span="1">&nbsp;</el-col>
                <el-col :span="7"><img :src="require('@/assets/img-connection-guidance/4.jpg')" class="connection-guidance-img"/></el-col>
            </el-row>
            <el-divider></el-divider>
            <!-- 3 -->
            <el-row>
                <el-col :span="1"><p>三、</p></el-col>
                <el-col :span="22"><p>返回“<span class="bold">IP摄像头</span>”APP首页，
                点击下方“<span class="red">打开IP摄像头服务器</span>”。</p></el-col>
            </el-row>
            <el-row>
                <el-col :span="24"><img :src="require('@/assets/img-connection-guidance/5.jpg')" class="connection-guidance-img"/></el-col>
            </el-row>
            <el-divider></el-divider>
            <!-- 4 -->
            <el-row>
                <el-col :span="1"><p>四、</p></el-col>
                <el-col :span="22"><p>点击打开左下角“<span class="red">RTMP推流</span>”按钮</p></el-col>
            </el-row>
            <el-row>
                <el-col :span="24"><img :src="require('@/assets/img-connection-guidance/6.jpg')" class="connection-guidance-img"/></el-col>
            </el-row>
            <el-divider></el-divider>
            <!-- 5 -->
            <el-row>
                <el-col :span="1"><p>五、</p></el-col>
                <el-col :span="22"><p><span class="red">刷新浏览器</span>即可看到实时监控画面。</p></el-col>
            </el-row>
            <el-divider content-position="center">END</el-divider>
        </div>
    </el-dialog>    
</template>

<script>
export default {
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
    },
    data(){
        return {
            RTMPPushUrl: '本地服务异常，获取推流地址失败，请检测网络连接'
        }
    },
    methods: {
        getRTMPPushUrl() {
            this.$axios.get("/api/video/RTMPPushUrl")
            .then(response => {
                if (response.data.success == true) {
                    this.RTMPPushUrl = response.data.o;
                }
            })
        },
        modalClose() {
            this.$emit("update:visible", false);
        },    
    },
    mounted() {
        this.getRTMPPushUrl();
    }
}
</script>

<style scoped>
.guidance-content {
    width: 100%;
    font-size: 14px;
}
p {
    line-height: 22px;
}
.bold {
    font-weight: bold;
}
.red {
    color: red;
    font-weight: bold;
}
.connection-guidance-img {
    max-width: 100%;
    max-height: 400px;
}
</style>